<template>
  <div class="header">
    <CommonHeader title="编辑资料" />

    <div class="img">
      <van-uploader v :after-read="afterRead">
        <img v-if="userInfo.head_img" :src="$axios.defaults.baseURL+userInfo.head_img" alt />
        <img v-else src="../../images/daone.png" alt />
      </van-uploader>
    </div>

    <PersonalCell title="昵称" :subhead="userInfo.nickname" @normalClick="isShowNickname=true" />
    <PersonalCell title="账号" :subhead="userInfo.username" />
    <PersonalCell title="密码" subhead="******" @normalClick="isShowPasswork=true" />
    <PersonalCell
      title="性别"
      :subhead="userInfo.gender==1?'靓仔':'靓女'"
      @normalClick="isShowgender=true"
    />
    <!-- 弹窗只是控制显示与否 不控制样式效果 所以放哪里都一样  -->

    <!-- 昵称弹出框 -->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      theme="round-button"
      confirm-button-color="#0a0"
      cancel-button-text="改个锤子"
      confirm-button-text="搞定"
      show-cancel-button
      @confirm="setNickname"
    >
      <van-field v-model="newNickname" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 密码弹出框 -->
    <van-dialog
      v-model="isShowPasswork"
      title="修改昵称"
      theme="round-button"
      confirm-button-color="#0a0"
      cancel-button-text="改个锤子"
      confirm-button-text="搞定"
      show-cancel-button
      @confirm="setPasswork"
    >
      <van-field v-model="newPasswork" placeholder="请输入新密码" />
    </van-dialog>
    <!-- 男女选项上拉菜单 -->
    <van-action-sheet
      v-model="isShowgender"
      :actions="genderList"
      @select="setGender"
      cancel-text="取消"
    />
  </div>
</template>


<script>
// 引入子组件
import PersonalCell from "../../components/PersonalCell";
import CommonHeader from "../../components/CommonHeader";
export default {
  data() {
    return {
      userInfo: {},
      // vabt Dialog弹出框默认是隐藏
      isShowNickname: false,
      isShowPasswork: false,
      isShowgender: false,
      newNickname: "",
      newPasswork: "",
      newGender: "",
      genderList: [
        {
          gender: 1,
          name: "🧑",
        },
        {
          gender: 0,
          name: "👧",
        },
      ],
    };
  },
  //    注册子组件
  components: {
    PersonalCell,
    CommonHeader,
  },
  // 获取数据渲染 这个请求与个人中心一致
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token"),
        // },
      }).then((res) => {
        // console.log(res);
        this.userInfo = res.data.data;
      });
    },

    // 封装编辑用户数据
    editPostting(newData) {
      this.$axios({
        url: "/user_update/" + localStorage.getItem("userId"),
        method: "post",
        // headers: {
        //   Authorization: "Bearer " + localStorage.getItem("token"),
        // },
        data: newData,
      }).then((res) => {
        console.log(res);
        this.loadPage();
      });
    },
    // 调用封装的编辑用户数据请求 把data数据传参方式传入

    setNickname() {
      // 判断修改昵称不能为空
      if (!this.newNickname) {
        this.$toast.fail("请输入昵称");
        return;
      }
      // 修改用户名
      this.editPostting({
        nickname: this.newNickname,
      });
      // 修改数据后清空再点击修改输入框会显示原来修改的数据
      this.newNickname = "";
    },
    setPasswork() {
      if (!this.newPasswork) {
        this.$toast.fail("请输入密码");
        return;
      }
      // 修改密码
      this.editPostting({
        password: this.newPasswork,
      });
      this.newPasswork = "";
    },
    setGender(item) {
      // console.log(item);
      // 修改性别
      this.editPostting({
        gender: item.gender,
      });
      this.isShowgender = false;
    },
    // 上传头像
    afterRead(fileObj) {
      // 上传图片要获取到图片的网络地址
      // 这个上传组件选择完图片触发这个回调
      // 在这里形参可以接受一个文件数据对象, 其中要上传的文件就在 fileObj.file 里面
      // 创建 FormData 对象, 将图片文件按照 api 要求的字段名插入其中
      const fd = new FormData();
      fd.append("file", fileObj.file);
      console.log(fileObj);
      this.$axios({
        method: "post",
        url: "/upload",
        data: fd,
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        // 这里可以获取到服务器中的图片访问路径
        console.log(res.data.data.url);
        // 2. 使用这个图片的网络地址修改用户信息即可
        this.editPostting({
          head_img: res.data.data.url,
        });
        this.$toast.success("修改成功");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  .img {
    padding-left: 8/360 * 100vw;
    padding-top: 13/360 * 100vw;
    text-align: center;
    margin-bottom: 20/360 * 100vw;

    img {
      width: 70/360 * 100vw;
      height: 70/360 * 100vw;
      border-radius: 50%;
      margin: 0 auto;
      // 保持图片等比例显示
      object-fit: cover;
    }
  }
}
</style>